<template>
  <el-dialog :visible.sync="showPointDialog" :before-close="check" title="选择计费码" :modal-append-to-body="false" width="67%">
    <div class="app-head">
      <el-row>
        <el-col :span="10">
          <div class="watch">
            计费码名称：
            <el-input
              v-model="billingCodeName"
              size="mini"
              placeholder="请输入计费码名称"
              style="width:200px"
            />
          </div>
        </el-col>

        <el-col :span="10">
          <div class="watch">
            计费码：
            <el-input
              v-model="billingCodeNum"
              size="mini"
              placeholder="请输入计费码"
              style="width:200px"
            />
          </div>
        </el-col>

        <el-col :span="4">
          <div class="watch">
            <el-button
              type="primary"
              size="mini"
              round
              @click="getPayListNum"
            >查询</el-button>
            <el-button
              round
              size="mini"
              @click="reset"
            >重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="selectTable">
      <el-table
        ref="multipleTable"
        :data="payList"
        border
        highlight-current-row
      >
        <!-- @current-change="handleSelectionChange" -->
        <el-table-column
          label="操作"
          width="55"
        >
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked" />
          </template>
        </el-table-column>
        <el-table-column
          prop="billingCodeName"
          label="计费码名称"
        />
        <el-table-column
          prop="billingCode"
          label="计费码"
        />
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="pageid" :page-sizes="[10,20,30]" :page-size="pagecount" :total="count" background highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <div class="btnStyles">
        <el-button
          type="primary"
          size="mini"
          round
          @click="verifyConect"
        >确认</el-button>
        <el-button
          type="primary"
          size="mini"
          plain
          round
          @click="check"
        >取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getPayList } from '@/api/expenses.js'
export default {
  name: 'Select',
  props: {
    selectDialog: {
      type: Boolean,
      default: false
    },
    indexNum: {
      type: Number,
      default: 0
    },
    codeVal: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showPointDialog: false, // 遮罩
      pageid: 1, // 当前页数
      pagecount: 10, // 每页可显示条数
      count: 0, // 总数量
      payCode: '', // 计费码
      billingCodeName: '', // 计费码名称
      index: 0, // 序号
      billingCodeNum: '', // 计费码查询
      payList: [{
        name: '中餐厅',
        checked: false,
        code: '1213'
      }, {
        name: '中餐厅',
        checked: false,
        code: '1215'
      }, {
        name: '中餐厅',
        checked: false,
        code: '1212'
      }, {
        name: '中餐厅',
        checked: false,
        code: '1210'
      }, {
        name: '中餐厅',
        checked: false,
        code: '1219'
      }]
    }
  },
  watch: {
    selectDialog(newVal) {
      this.showPointDialog = newVal
      this.index = this.indexNum
      if (newVal) {
        this.getPayListNum()
      }
    }
  },
  methods: {

    // 请求计费码列表
    getPayListNum() {
      var that = this
      this.pageid = 1
      // var that = this
      var data = {
        billingCode: this.billingCodeNum,
        billingCodeName: this.billingCodeName,
        pageid: 1,
        pagecount: 20
      }
      getPayList(data).then(res => {
        this.payList = res.data.list
        this.count = res.data.count
        if (this.payList.length > 0) {
          this.payList.forEach(item => {
            item.checked = false
            if (item.billingCode === that.codeVal) {
              item.checked = true
            } else {
              console.log(2)
            }
          })
        }
      })
    },
    // 回调父组件
    check() {
      this.showPointDialog = false
      this.payList.forEach(item => {
        item.checked = false
      })
      this.billingCodeNum = ''
      this.billingCodeName = ''
      this.$emit('closeSelect')
    },

    /* handleSelectionChange(row) {
      console.log(row)
      // this.$nextTick(() => {
      if (row) {
        this.payCode = row.billingCode
        this.payList.forEach(item => {
          if (item.billingCode !== row.billingCode) {
            item.checked = false
          }
        })
      // })
    }, */
    // 当前页面显示条数改变时
    handleSizeChange(num) {
      this.flag = false
      const request = {
        billingCode: this.billingCodeNum,
        billingCodeName: this.billingCodeName,
        pageid: 1, // 当前页数
        pagecount: num // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      getPayList(request).then(res => {
        this.list = res.data.list // 列表项
        this.count = parseInt(res.data.count) // 总数量
        this.pageid = 1
        this.pagecount = num
        this.flag = true
      })
    },
    reset() {
      this.billingCodeName = ''
      this.billingCodeNum = ''
    },
    // 跳转某页
    handleCurrentChange(num) {
      this.pageid = num // 当前页数
      console.log(num)
      const request = {
        billingCode: this.billingCodeNum,
        billingCodeName: this.billingCodeName,
        pageid: num, // 当前页数
        pagecount: this.pagecount // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      // if (this.flag === true) {
      getPayList(request).then(response => {
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        console.log('返回数据')
        console.log(response.data)
      })
      // }
    },

    // 确认关联
    verifyConect() {
      let payCode
      var allResult = []
      for (const i in this.payList) {
        allResult.push(this.payList[i].checked)
      }
      console.log(allResult)
      if (allResult.indexOf(true) < 0) {
        payCode = ''
      } else {
        payCode = this.payCode
      }
      this.showPointDialog = false
      this.$emit('closeSelect', payCode, this.index)
    }
  }
}
</script>

<style scoped>
.el-checkbox__inner{
  border-radius: 50% !important;
}
.box-card{
  margin-top: -25px;
}
.box-card1{
  margin-top: 10px;
}
.box-card2{
  margin-top: 10px;
}
.watch{
  margin: 10px 0;
}
.bold{
  font-weight: bold;
}
.el-card__header{
  padding: 9px 20px !important;
}
.selectTable{
  margin-top: 10px;
  position: relative;
}
.app-head{
  margin-top: -20px;
  position: relative;
}
.el-pagination{
  justify-content: flex-start !important;
}
.pagination-container{
  margin-left: 20px !important;
  margin-bottom: -5px !important;
}
.btnStyles{
  position: absolute;
  right: 0;
  bottom: -5px;
}
</style>
